<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>用户管理</BreadcrumbItem>
      <BreadcrumbItem>用户列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        用户名称: <Input type="text" clearable placeholder="请输入用户名称" style="width: 120px"/>
      </FormItem>
      <FormItem>
        用户等级: <Input type="text" clearable placeholder="请输入用户等级" style="width: 120px"/>
      </FormItem>
      <FormItem>
        <Button type="primary" v-hasPermission="['9']" @click="$router.push('/userChange/addUser')"
                style="margin-right: 10px">添加账号
        </Button>
        <Button v-if="showDel" v-hasPermission="['10']" style="margin-right: 10px" @click="alldel">批量删除</Button>
      </FormItem>
    </Form>
    <div>
      <Table :columns="columns1" :data="tableData" @on-selection-change="selectChange" :height="height"
             :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span class="success" v-if="row.status==='1'">启用中</span>
          <span class="error" v-if="row.status==='2'">已被禁用</span>
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{ row.user_count }}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!==0"><span
            style="color: #2db7f5;">{{ row.group_count }}</span></router-link>
          <span v-else>{{ row.group_count }}</span>
        </template>
        <template slot-scope="{ row }" slot="user_device_count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!==0"><span
            style="color: #2db7f5;">{{ row.user_device_count }}</span></router-link>
          <span v-else>{{ row.user_device_count }}</span>
        </template>

        <!-- 机器 -->
        <template slot-scope="{ row }" slot="device_count">
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!==0"><span
            style="color: #2db7f5;">{{ row.device_count }}</span></router-link>
          <span v-else>{{ row.device_count }}</span>
        </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            v-has-permission="['39']"
            @click="remove(row)">
            删除
          </Button>
          <Button
            v-show="row.status==='1'"
            class="button"
            size="small"
            style="margin-right: 5px"
            v-has-permission="['39']"
            type='error'
            @click="setStatus(row)">
            <span>禁用</span>
          </Button>
          <Button
            v-show="row.status==='2'"
            class="button"
            size="small"
            style="margin-right: 5px"
            v-has-permission="['39']"
            type='success'
            @click="setStatus(row)">
            <span>启用</span>
          </Button>
          <Button type="primary"
                  size="small"
                  style="margin-right: 5px"
                  @click="$router.push({path:'/userChange/details',query:{id:row.id}})">用户详情
          </Button>
        </template>
      </Table>
    </div>

    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
            show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>

    <Modal v-model="modal1" :title="form.id ? '编辑账号' : '添加账号'" :loading="modalLoading" :mask-closable="false"
           @on-ok="confirm" @on-cancel="cancel">
      <Form :model="form" :label-width="110">
        <FormItem label="密码">
          <Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
        </FormItem>

        <FormItem label="当前角色" v-hasPermission="['34']">
          <Select clearable v-model="form.role_id" placeholder="请选择" style="width: 120px;">
            <Option v-for="(item, index) in data1" :value="item.id" :key="index">{{ item.title }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal3" title="设置角色" @on-ok="confirm2" @on-cancel="cancel2" :mask-closable="false">
      <Form :label-width="110">
        <FormItem label="当前角色">
          <Select v-model="user.role_id" placeholder="请选择" style="width: 120px;">
            <Option :value="item.id" v-for="(item, index) in data1" :key="index">{{ item.title }}</Option>
          </Select>
        </FormItem>

      </Form>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      width: this.$store.state.width,
      height: this.$store.state.height,
      showDel: false, // 批量删除

      loading: false,
      request: {
        username: '',
        page: 1,
        loading: false
      },
      codeImg: '',
      modal2: false,
      modal3: false,
      columns1: [
        {
          width: 60,
          align: 'center',
          type: 'selection'
        },
        {
          title: '用户头像',
          key: 'head',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '用户名称',
          key: 'nickname',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '用户等级',
          key: 'name',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户零钱',
          key: 'balance',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户积分',
          key: 'score',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户状态',
          key: 'status',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '用户创建时间',
          key: 'create_time',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '操作',
          slot: 'option',
          minWidth: 300,
          align: 'center',
          fixed: 'right'
        }
      ],
      tableData: [],
      page: {},
      modalLoading: true,
      modal1: false,
      form: {
        id: null
        // username: "",
        // email: ""
      },
      user: {
        id: '',
        role_id: ''
      },
      data1: [],
      selectID: [],
      content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
    }
  },
  created () {
    this.getUserlist()
  },
  methods: {
    alldel () {
      // 批量删除
      this.$Modal.confirm({
        title: '确定要删除这些账号吗？',
        onOk: () => {
          // this.$Message.success("删除成功");
          this.axios.post('account/delAccount', { id: this.selectID }).then(res => {
            if (res.code === 1) {
              this.$Message.success('删除成功')
              this.lists()
            }
          })
        },
        onCancel: () => {
        }
      })
    },
    selectChange (selection) {
      console.log('选项发生改变', selection)
      this.selectID = []
      selection.forEach(item => {
        this.selectID.push(item.id)
      })

      this.showDel = this.selectID.length > 0
      console.log(this.selectID)
    },

    edituser (row) {
      console.log(row)
      this.user.id = row.id
      this.user.role_id = row.role_id

      console.log(this.user)

      this.modal3 = true
    },
    confirm2 () {
      console.log(this.user)
      this.axios.post('account/setAccRole', this.user).then(res => {
        if (res.code === 1) {
          this.modal3 = false
          this.$Message.success('保存成功！')
          this.lists()
          this.cancel2()
        }
      })
    },
    cancel2 () {
      this.user = {
        id: '',
        role_id: ''
      }
    },

    // 获取用户列表
    getUserlist () {
      this.loading = true
      this.axios.post('user/userList', this.request).then(res => {
        if (res.code === 1) {
          this.loading = false
          this.tableData = res.data.list
          this.page.count = res.data.count // 总条数
          this.page.curPage = res.data.curPage // 当前页
          this.page.countPage = res.data.countPage // 总页数
        }
      })
    },

    viewSub (row) {
      console.log(row.id)
      this.$Message.success('id:', row.id)
      // this.$router.push('/master/index?account_id=' + row.id);
    },
    search () {
      this.request.page = 1
      this.lists()
    },
    handleSizeChange (val) {
      this.request.page = 1
      this.request.limit = val
      this.lists()
    },
    handleCurrentChange (val) {
      this.request.page = val
      this.lists()
    },
    edit (row) {
      console.log(row)

      this.form.id = row.id
      this.form.role_id = row.role_id
      this.form.username = row.username
      // this.form.email = row.email;
      this.modal1 = true
    },
    confirm () {
      this.axios.post('account/accEdit', this.form).then(res => {
        this.modalLoading = false
        if (res.code === 1) {
          this.modal1 = false
          this.$Message.success('保存成功！')
          this.lists()

          this.cancel()
        }
      })
    },
    remove (row) {
      this.selectID = []
      this.selectID.push(row.id)

      this.$Modal.confirm({
        title: '确定要删除账号:“' + row.username + '”吗？',
        onOk: () => {
          this.axios.post('account/delAccount', { id: this.selectID }).then(res => {
            if (res.code === 1) {
              this.$Message.success('删除成功')
              this.lists()
            }
          })
        },
        onCancel: () => {
        }
      })
    },
    setStatus (row) {
      var text = '确定要' + (row.status === '2' ? '启用' : '禁用') + '账号:“' + row.nickname + '”吗？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.axios.post('user/setStatus', { id: row.id, status: row.status === '1' ? 2 : 1 }).then(res => {
            if (res.code === 1) {
              this.$Message.success('操作成功')
              this.getUserlist()
              this.lists()
            }
          })
        },
        onCancel: () => {
        }
      })
    },
    cancel () {
      this.form = {
        id: null,
        username: '',
        email: ''
      }
    }
  }
}
</script>

<style scoped>
.spec_item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.spec_item .input {
  width: 200px;
}

.spec_item button {
  margin-left: 10px;
}
</style>
